<template>
  <div>
    <baidu-map :style="mapStyle" ak="tyGBxrYAXHXpD2lTCLyTbmagHmxGV01d" :map-click="false" :center="center"
      :zoom="zoom" :scroll-wheel-zoom="true" @click="getClickInfo" @moving="syncCenterAndZoom"
      @moveend="syncCenterAndZoom" @ready="onBaiduMapReady" @zoomend="syncCenterAndZoom">
      <bm-view style="width: 100%; height: 100%;" />
      <bm-marker :position="{ lng: center.lng, lat: center.lat }" :dragging="true"
        animation="BMAP_ANIMATION_BOUNCE" />
      <bm-control :offset="{ width: '10px', height: '10px' }">
      </bm-control>
      <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" show-address-bar auto-location />
      <bm-local-search :keyword="keyword" :auto-viewport="true" :panel="false" />
    </baidu-map>
    <div class="back" @click="backHome()"> &lt; </div>
  </div>
</template>

<script>
import { BaiduMap, BmControl, BmView, BmAutoComplete, BmLocalSearch, BmMarker, BmGeolocation } from 'vue-baidu-map'

export default {
  name: 'acurrantMap',
  components: {
    BaiduMap,
    BmControl,
    BmView,
    BmAutoComplete,
    BmLocalSearch,
    BmMarker,
    BmGeolocation
  },
  props: {
    // 在子组件中使用 props 选项去接收来自父组件传递过来的数据
    dialogVisible: Boolean,
    mapHeight: {
      type: Number,
      default: 900
    },
    title: {
      type: String,
      default: '选择目标位置'
    },
    width: {
      type: [Number, String],
      default: '100%'
    },
    height: {
      type: [Number, String],
      default: '100%'
    }
  },
  data () {
    return {
      // 地图
      BMap: null, // 地图组件是否就绪
      showMapComponent: this.dialogVisible,
      keyword: '', // 地区搜索的信息
      mapStyle: {
        width: '100%',
        height: this.mapHeight + 'px'
      },
      center: { lng: 104.07, lat: 30.67 },
      choosedLocation: { province: '', city: '', district: '', addr: '' },
      zoom: 12
    }
  },
  create: {

  },
  methods: {
    // 鼠标移动
    Change (mapvalue) {
      console.log(mapvalue)
    },
    // 地图点击事件
    getClickInfo (e) {
      // 调整地图中心位置
      this.center.lng = e.point.lng
      this.center.lat = e.point.lat

      // 此时已经可以获取到BMap类
      if (this.BMap) {
        const that = this
        // Geocoder() 类进行地址解析
        // 创建地址解析器的实例
        const geoCoder = new this.BMap.Geocoder()
        // getLocation() 类--利用坐标获取地址的详细信息
        // getPoint() 类--获取位置对应的坐标
        geoCoder.getLocation(e.point, function (res) {
          console.log('获取经纬度', e.point, '获取详细地址', res)
          const addrComponent = res.addressComponents
          const surroundingPois = res.surroundingPois
          const province = addrComponent.province
          const city = addrComponent.city
          const district = addrComponent.district
          let addr = addrComponent.street
          if (surroundingPois.length > 0 && surroundingPois[0].title) {
            if (addr) {
              addr += `-${surroundingPois[0].title}`
            } else {
              addr += `${surroundingPois[0].title}`
            }
          } else {
            addr += addrComponent.streetNumber
          }
          that.choosedLocation = { province, city, district, addr, ...that.center }
        })
      }
    },
    syncCenterAndZoom (e) {
      // 返回地图当前的缩放级别
      this.zoom = e.target.getZoom()
    },
    backHome () {
      this.$router.replace('/')
    }
  }
}
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
}
body,
html {
  width: auto;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}

.back {
  position: fixed;
  top: 2%;
  left: 2%;
  height: 40px;
  width: 40px;
  text-align: center;
  font-size: 36px;
  border-radius: 50%;
  background-color: rgb(0,0,0,.2);

}

</style>
